<template>
  <div>
    <zero-dialog :showDialog.sync="dialog.open" :width="dialog.width" :title="dialog.title"
                 :fullscreen.sync="dialog.fullscreen" :id="dialog.id"
                 :submit="submitForm">
      <div slot="body">
        <el-upload :ref="upload.ref" :limit="upload.limit"
                   :action="upload.action"
                   :http-request="beforeUploadHandle" :on-exceed="handleExceed"
                   :auto-upload="upload.autoUpload" drag>
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        </el-upload>
      </div>
    </zero-dialog>

    <!-- 进度条-->
    <div id="captcha-mask" v-show="showCaptchaMask">
      <el-progress type="circle" :percentage="percentage" :color="colors"
                   :format="format"></el-progress>
    </div>
  </div>
</template>

<script>

import minioPlusHelper from "@/mixins/minio-plus.js";

export default {
  name: 'addUpdateForm',
  props: {
    //列表刷新
    getDataList: {
      type: Function,
      default: null
    },
  },
  data() {
    return {
      axios: this.$axiosFile, // 请求的微服务
      showCaptchaMask: false,
      dialog: {//弹框数据
        id: "importDialogId",
        fullscreen: false, // 弹框全屏
        open: false,//是否弹出表单
        title: '',//标题
        width: '400px', //定义宽度，默认400px
      },
      upload: {//上传数据
        ref: 'importUploadRef',
        action: '#',//屏蔽组件提交
        limit: 1,//可以传几个
        autoUpload: false,//不自动上传
      },
      percentage: 0,//进度条百分比
      percentageText: '',//进度条文字
      colors: [//进度条颜色
        {color: '#F06595', percentage: 10}, // 桃红色
        {color: '#E91E63', percentage: 20}, // 玫瑰红
        {color: '#9C27B0', percentage: 30}, // 深紫色
        {color: '#673AB7', percentage: 40}, // 深蓝色
        {color: '#3F51B5', percentage: 50}, // 靛蓝色
        {color: '#2196F3', percentage: 60}, // 天蓝色
        {color: '#03A9F4', percentage: 70}, // 明亮的天蓝色
        {color: '#00BCD4', percentage: 80}, // 青绿色
        {color: '#009688', percentage: 90}, // 深青绿色
        {color: '#5CB87A', percentage: 100} // 灰绿色
      ]
    }
  },
  methods: {
    //导入点击事件
    initDialog(params) {
      this.dialog.title = params.title;
      this.dialog.open = true;
      this.$nextTick(() => {
        this.$refs[this.upload.ref].clearFiles()
      });
    },
    // 处理选择新的文件
    handleExceed(files, fileList) {
      this.$set(fileList[0], 'raw', files[0]);
      this.$set(fileList[0], 'name', files[0].name);
    },

    submitForm() {
      this.$refs[this.upload.ref].submit();
      this.percentage = 0
    },
    async beforeUploadHandle(option) {
      this.dialog.open = false
      this.showCaptchaMask = true
      await minioPlusHelper.uploadFile(option.file, {}, {
        beforeInitFile: this.beforeInitFile,
        afterInitFile: this.afterInitFile,
        beforeUploadPartList: this.beforeUploadPartList,
        afterUploadPartList: this.afterUploadPartList,
        beforeCompleteFile: this.beforeCompleteFile,
        afterCompleteFile: this.afterCompleteFile,
        fileUploadFinish: this.fileUploadFinish,
      }).finally(() => {
        this.showCaptchaMask = false
        this.getDataList()
      });
    },
    beforeInitFile(file) {
      this.percentage = 10
      this.percentageText = '文件初始化'
    },
    afterInitFile(file, fileState) {
      this.percentage = 20
      this.percentageText = '文件初始化完成'
    },
    beforeUploadPartList(file, fileState, index, chunkFile) {
      this.percentage = 30
      this.percentageText = '文件分片'
    },
    afterUploadPartList(file, fileState, index, chunkFile) {
      this.percentage = 40
      this.percentageText = `第${index + 1}分片上传完成`
    },
    beforeCompleteFile(file, fileState, partMd5List) {
      this.percentage = 80
      this.percentageText = `文件合并开始`
    },
    afterCompleteFile(file, fileState, partMd5List) {
      this.percentage = 90
      this.percentageText = `文件合并完成`
    },
    fileUploadFinish(file, fileState) {
      this.percentage = 100
      this.percentageText = `文件上传完成`
    },
    // 计算文件大小函数
    formatFileSize(size) {
      if (size < 1024 * 1024) {
        const temp = size / 1024;
        return temp.toFixed(2) + "KB";
      } else if (size < 1024 * 1024 * 1024) {
        const temp = size / (1024 * 1024);
        return temp.toFixed(2) + "MB";
      } else {
        const temp = size / (1024 * 1024 * 1024);
        return temp.toFixed(2) + "GB";
      }
    },
    format(percentage) {
      return this.percentageText;
    }
  }
}
</script>

<style>
#captcha-mask {
  display: flex;
  z-index: 99;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.53);
  justify-content: center;
  align-items: center;
}

.el-progress {
  background-color: white;
}
</style>
